<template>
    <view>
        <!-- <back></back> -->
        <view class="all">
            <view class="card">
                <!-- <view class="u-flex-center u-row-left" v-for="(item,index) in detail.goods">
					<image :src="item.image" mode="aspectFill" class="head-img"></image>
					<view class="u-flex-center u-row-between" style="width: 100%;">
						<view class="cont">
							<view class="name u-line-2">{{item.title}}</view>
							<view class="cate">规格：{{item.difference}}</view>
							<view class="price u-m-t-20"><text>￥</text>{{item.price}}</view>
						</view>
						<view class="number">×{{item.number}}</view>
					</view>
				</view> -->
                <view>
                    <view class="top">
                        <view class="left" @click="goShop(shop_id)">
                            <image
                                class="icon_sj"
                                :src="BaseUrl + '/static/common/cen7.png'"
                                mode="scaleToFill"
                            />
                            <text class="mendian">{{ shopname }}</text>
                            <image
                                class="icon_arrow"
                                :src="BaseUrl + '/static/wImg/arrowRig.png'"
                                mode="scaleToFill"
                            />
                        </view>
                    </view>
                </view>
                <view class="u-flex-center u-row-left" style="padding: 20rpx 0">
                    <image
                        :src="BaseUrl + goodsItem.image"
                        mode="aspectFill"
                        class="head-img"
                    ></image>
                    <view
                        class="u-flex-center u-row-between"
                        style="width: 100%"
                    >
                        <view class="cont">
                            <view class="name u-line-2">{{
                                goodsItem.title
                            }}</view>
                            <view class="cate"
                                >规格：{{ goodsItem.difference }}</view
                            >
                            <view class="price u-m-t-20"
                                ><text>￥</text
                                >{{
                                    goodsItem.group_type == "groups" ||
                                    goodsItem.group_type == "alone" ||
                                    goodsItem.group_type == "ladder"
                                        ? goodsItem.group_price
                                        : goodsItem.price
                                }}</view
                            >
                        </view>
                        <view class="number">×{{ goodsItem.number }}</view>
                    </view>
                </view>
            </view>
            <view class="card card2">
                <view
                    class="message-item u-flex u-row-between u-border-bottom"
                    @click="show1 = true"
                >
                    <view>物流状态</view>
                    <view class="u-flex">
                        <text
                            class="u-m-r-10"
                            :style="{
                                color: isReceive.text ? '#333' : '#BEBEBE',
                            }"
                            >{{ isReceive.text || "是否收到货" }}</text
                        >
                        <u-icon
                            name="arrow-right"
                            color="#BEBEBE"
                            size="25"
                        ></u-icon>
                    </view>
                </view>
                <view
                    class="message-item u-flex u-row-between u-border-bottom"
                    @click="show2 = true"
                >
                    <view>退款类型</view>
                    <view class="u-flex">
                        <text
                            class="u-m-r-10"
                            :style="{
                                color: refundType.text ? '#333' : '#BEBEBE',
                            }"
                            >{{ refundType.text || "请选择退款类型" }}</text
                        >
                        <u-icon
                            name="arrow-right"
                            color="#BEBEBE"
                            size="25"
                        ></u-icon>
                    </view>
                </view>
                <view
                    class="message-item u-flex u-row-between"
                    @click="show3 = true"
                >
                    <view>退款原因</view>
                    <view class="u-flex">
                        <text
                            class="u-m-r-10"
                            :style="{
                                color: refundReason.text ? '#333' : '#BEBEBE',
                            }"
                            >{{ refundReason.text || "退款的原因" }}</text
                        >
                        <u-icon
                            name="arrow-right"
                            color="#BEBEBE"
                            size="25"
                        ></u-icon>
                    </view>
                </view>
            </view>
            <view class="card card2">
                <view class="message-item u-flex u-row-between">
                    <view
                        class="u-flex"
                        style="width: 100%; justify-content: space-between"
                    >
                        <view>退款金额</view>
                        <!-- <text style="color: rgba(0, 0, 0, 1)">￥{{ detail.pay.actual_payment }}</text> -->
                        <!-- <text class="u-m-l-20">(不能超过￥{{ detail.pay.actual_payment }}元)</text> -->
                        <input
                            input
                            style="width: 70%"
                            type="digit"
                            v-model="price"
                            :placeholder="'请输入退款金额'"
                            placeholder-style="font-size: 28rpx;color: #999;"
                            cursor-spacing="1"
                            maxlength="10"
                        />

                        <!-- '退款金额不能超过￥' +
                                (goodsItem.group_type == 'groups' ||
                                goodsItem.group_type == 'alone' ||
                                goodsItem.group_type == 'ladder'
                                    ? goodsItem.group_price * goodsItem.number
                                    : goodsItem.price * goodsItem.number) +
                                '元' -->
                    </view>
                    <!-- <view class="evaluation u-flex-center"
                        >￥ -->
                    <view class="u-relative">
                        <!-- <text style="color: rgba(0, 0, 0, 0)">{{ !price ? 0 : price }}</text> -->
                        <!-- <input
                            input
                            type="number"
                            v-model="price"
                            :placeholder="'请输入退款金额'"
                            placeholder-style="font-size: 28rpx;color: #EF5205;"
                            cursor-spacing="1"
                            maxlength="10"
                        /> -->
                    </view>
                    <!-- </view> -->
                </view>
            </view>
            <view class="card card2">
                <view class="top-title u-p-t-20">上传凭证</view>
                <view class="top-sty">
                    <view class="top_wrap u-flex">
                        <view
                            class="top_img top_img_big u-flex-center"
                            v-for="(item, index) in fileList"
                            :key="index"
                        >
                            <image
                                :src="item"
                                v-if="item"
                                mode="widthFix"
                            ></image>
                            <image
                                :src="
                                    BaseUrl + '/static/yCreate/greenDelete.png'
                                "
                                @click.stop="deleteImg(index)"
                                class="ab_rig"
                            >
                            </image>
                        </view>
                        <view
                            class="top_img top_img_big u-flex-col u-col-center u-row-center"
                            @click="uploadImg()"
                        >
                            <image
                                :src="BaseUrl + '/static/yCreate/add2.png'"
                                class="pho"
                                mode="widthFix"
                            ></image>
                            <view>点击上传</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="card card2">
                <view class="message-item u-flex">
                    <view>退款理由</view>
                    <input
                        v-model="argument"
                        type="text"
                        class="u-m-l-20"
                        placeholder="选填"
                        placeholder-style="font-size: 30rpx;color: #BEBEBE;"
                    />
                </view>
            </view>
        </view>
        <view style="height: 300rpx; width: 100%"></view>
        <view class="box">
            <view class="btn" @click="$u.throttle(submit, 1500)">提交申请</view>
        </view>
        <u-select
            v-model="show1"
            :list="list1"
            confirm-color="#46c188"
            @confirm="confirm($event, 1)"
        ></u-select>
        <u-select
            v-model="show2"
            :list="list2"
            confirm-color="#46c188"
            @confirm="confirm($event, 2)"
        ></u-select>
        <u-select
            v-model="show3"
            :list="list3"
            confirm-color="#46c188"
            @confirm="confirm($event, 3)"
        ></u-select>
    </view>
</template>

<script>
import { BaseUrl } from "../../utils/req.js";
export default {
    data() {
        return {
            BaseUrl,
            isReceive: {
                text: "",
                value: "",
            },
            refundType: {
                text: "",
                value: "",
            },
            refundReason: {
                text: "",
                value: "",
            },
            price: "",
            argument: "",
            fileList: [],
            fileList2: [],
            show1: false,
            show2: false,
            show3: false,
            list1: [
                {
                    value: "0",
                    label: "未收到货",
                },
                {
                    value: "1",
                    label: "已收到货",
                },
            ],
            list2: [
                {
                    value: "0",
                    label: "我要退款(无需退货)",
                },
                {
                    value: "1",
                    label: "退货退款",
                },
            ],
            list3: [
                {
                    value: "0",
                    label: "不喜欢",
                },
                {
                    value: "1",
                    label: "空包裹",
                },
                {
                    value: "2",
                    label: "一直未送达",
                },
                {
                    value: "3",
                    label: "颜色/尺码不符",
                },
                {
                    value: "4",
                    label: "质量问题",
                },
                {
                    value: "5",
                    label: "少件漏发",
                },
                {
                    value: "6",
                    label: "假冒品牌",
                },
            ],
            detail: {},
            goodsItem: {},
            shopname: "",
            shop_id: 0,
        };
    },
    onLoad(options) {
        this.id = options.id;
        this.order_index = options.index;
        this.goodsItem = JSON.parse(options.item);
        this.shopname = options.shopname;
        this.shop_id = options.shop_id;
        console.log(this.goodsItem, "跳转携带商品详情");
        // this.getDetail();
    },
    methods: {
        submit() {
            // let goods = []
            // this.detail.goods.map(item=>{
            // 	goods.push(item.id)
            // })
            // if (
            //     this.goodsItem.group_type == "groups" ||
            //     this.goodsItem.group_type == "alone" ||
            //     this.goodsItem.group_type == "ladder"
            //         ? Number(this.price) >
            //           Number(this.goodsItem.group_price * this.goodsItem.number)
            //         : Number(this.price) >
            //           Number(this.goodsItem.price * this.goodsItem.number)
            // ) {
            //     this.$u.toast("退款金额大于最大退款金额，请修改");
            //     return false;
            // } else
            if (!this.isReceive.value) {
                this.$u.toast("请选择物流状态");
                return false;
            } else if (!this.refundType.value) {
                this.$u.toast("请选择退款类型");
                return false;
            } else if (!this.refundReason.value) {
                this.$u.toast("请选择退款原因");
                return false;
            } else if (!this.price) {
                this.$u.toast("请填写退款金额");
                return false;
            }
            this.$u
                .post("/api/wanlshop/refund/addApply", {
                    type: this.refundType.value, //   退款类型:0=我要退款(无需退货),1=退货退款
                    expressType: this.isReceive.value, //  物流状态:0=未收到货,1=已收到货
                    reason: this.refundReason.value,
                    images: this.fileList2,
                    order_type: this.goodsItem.group_type == "goods" ? "goods" : "groups",
                    money: this.price,
                    refund_content: this.argument,
                    order_id: this.id,
                    goods: this.goodsItem.id
                        ? this.goodsItem.id
                        : this.goodsItem.goods.id,
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.$u.toast("申请成功");
                        setTimeout(() => {
                            uni.navigateBack();
                        }, 1500);
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
        },
        // getDetail() {
        //     if (this.goodsItem.order_type == "groups") {
        //         this.$request
        //             .get("api/wanlshop/groups/order/getOrderInfo", {
        //                 id: this.id,
        //             })
        //             .then((res) => {
        //                 this.detail = res.data;
        //             });
        //     } else {
        //         this.$request
        //             .get("api/wanlshop.order/getOrderInfo", {
        //                 id: this.id,
        //             })
        //             .then((res) => {
        //                 this.detail = res.data;
        //                 // this.price = Number(this.detail.pay.actual_payment);
        //             });
        //     }
        // },
        confirm(e, type) {
            if (type == 1) {
                this.isReceive.text = e[0].label;
                this.isReceive.value = e[0].value;
            } else if (type == 2) {
                this.refundType.text = e[0].label;
                this.refundType.value = e[0].value;
            } else {
                this.refundReason.text = e[0].label;
                this.refundReason.value = e[0].value;
            }
        },
        uploadImg() {
            let that = this;
            uni.chooseImage({
                count: 1,
                sizeType: ["original", "compressed"],
                success: async (res) => {
                    console.log(res);

                    await uni.uploadFile({
                        url: BaseUrl + "/api/common/upload", //上传
                        filePath: res.tempFilePaths[0],
                        name: "file",
                        header: {
                            token: uni.getStorageSync("token"),
                            "content-type": "multipart/form-data",
                        },
                        success: (res) => {
                            let data = JSON.parse(res.data);
                            that.fileList.push(data.data.fullurl);
                            that.fileList2.push(data.data.url);
                        },
                        fail: (err) => {
                            console.log(err, "上传失败");
                        },
                    });
                },
            });
        },
        deleteImg(index) {
            this.fileList.splice(index, 1);
            this.fileList2.splice(index, 1);
        },
    },
};
</script>

<style lang="scss">
.all {
    padding: 0 24rpx;
    .card {
        width: 100%;
        margin-top: 18rpx;
        padding: 20rpx;
        background: #ffffff;
        border-radius: 10rpx;
        .head-img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
            flex-shrink: 0;
        }
        .cont {
            width: 100%;
            .name {
                margin-bottom: 12rpx;
                font-size: 28rpx;
            }
            .cate {
                width: fit-content;
                width: -webkit-fit-content;
                width: -moz-fit-content;
                padding: 3rpx;
                background: #fafafa;
                font-size: 22rpx;
                border-radius: 5rpx;
            }
            .price {
                font-size: 40rpx !important;
                font-weight: 550;
                color: #ef5205;
                text {
                    font-weight: 500;
                    font-size: 20rpx;
                }
            }
        }
        .number {
            width: 120rpx;
            text-align: right;
            font-size: 24rpx;
            color: #b0b0b0;
        }
        .top-title {
            font-size: 30rpx;
            color: #333333;
        }
        .top-sty {
            padding: 20rpx 0;

            .top_img {
                width: 160rpx;
                height: 160rpx;
                background: #f7f7f7;
                border-radius: 20rpx;
                position: relative;
                overflow: hidden;
                font-size: 24rpx;
                color: #b0b0b0;
                image {
                    width: 100%;
                    height: 100%;
                }

                .pho {
                    margin-bottom: 10rpx;
                    width: 40rpx;
                    height: auto;
                }

                .ab {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    margin: auto auto;
                    z-index: 2;
                }

                .ab_rig {
                    width: 50rpx;
                    height: 50rpx;
                    position: absolute;
                    top: 6rpx;
                    right: 6rpx;
                    z-index: 2;
                }
            }

            .top_img_big {
                width: 160rpx;
                height: 160rpx;
                margin-right: 23rpx;

                &:nth-child(3n) {
                    margin-right: 0rpx;
                }
            }
        }
        .message-item {
            padding: 30rpx 0;
            font-size: 30rpx;
            color: #333333;
            view {
                flex-shrink: 0;
            }
            text {
                text-align: right;
                display: block;
                color: #bebebe;
            }
            input {
                font-size: 30rpx;
            }
            .evaluation {
                font-size: 30rpx;
                color: #ef5205;
                input {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 100%;
                    height: 100%;
                }
                text {
                    color: #999;
                }
            }
        }
    }
}
.card2 {
    padding: 0 20rpx !important;
}
.box {
    position: fixed;
    bottom: 0;
    padding: 20rpx 40rpx;
    width: 100%;
    background: #f6f6f6;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    .btn {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 50rpx;
        background: linear-gradient(98deg, #606dce 0%, #606dce 100%);
        font-size: 28rpx;
        color: #fff;
    }
}
.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .left {
        display: flex;
        align-items: center;

        .mendian {
            font-size: 28rpx;
            font-weight: bold;
        }

        .icon_sj {
            width: 40rpx;
            height: 40rpx;
            margin-right: 10rpx;
        }

        .icon_arrow {
            width: 14rpx;
            height: 24rpx;
            margin-left: 10rpx;
            opacity: 0.5;
        }
    }
}
</style>
